<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-logo">
        <img src="../assets/login/logo.png" alt="Logo" />
      </div>
<!--      <div class="login-title">客户需求管理系统</div>-->
      <div class="login-title">{{ loginTitle }}</div>
      <div class="login-form">
        <div class="form-item">
          <div class="input-wrapper">
            <img class="icon" src="../assets/login/user.png" alt="User Icon" />
            <input v-model.trim="userName" type="text" placeholder="请输入用户名" />
          </div>
        </div>
        <div class="form-item">
          <div class="input-wrapper">
            <img class="icon" src="../assets/login/pass.png" alt="Password Icon" />
            <el-input show-password v-model="posseWord" placeholder="请输入登录密码"></el-input>
            <!--            <input :type="showPassword ? 'text' : 'password'" v-model.trim="posseWord" placeholder="请输入登录密码" />-->
<!--            <button type="button" class="toggle-password" @click="togglePassword">-->
<!--              {{ showPassword ? '隐藏' : '显示' }}-->
<!--            </button>-->
          </div>
        </div>
        <button class="login-button" @click="Submits">登录</button>
      </div>
    </div>
    <div class="footer">
      Copyright © 深圳市腾进达智能科技有限公司, All Rights Reserved.
    </div>
  </div>
</template>

<script>
import { post } from '@/api/my_axios'
import { setCookie, delCookie } from '@/utils/aqi'

export default {
  name: 'Login',
  data () {
    return {
      showPassword: false,
      loginTitle: '客户需求管理系统',
      userName: '',
      posseWord: ''
    }
  },
  mounted() {
    this.setTitleBasedOnUrl();
    // 延时检测自动填充内容
    setTimeout(this.checkAutofill, 500);
  },
  methods: {

    setTitleBasedOnUrl() {
      const url = window.location.href;
      if (url.includes('web/cmsview/crm')) {
        this.loginTitle = '客户需求管理系统(内部)';
      } else {
        this.loginTitle = '客户需求管理系统';
      }
    },

    togglePassword() {
      this.showPassword = !this.showPassword;
    },
    checkAutofill() {
      // 手动检查密码框是否被自动填充
      const passwordInput = this.$el.querySelector('input[type="password"]');
      if (passwordInput && passwordInput.value) {
        this.posseWord = passwordInput.value; // 更新 v-model 数据
      }
    },
    Submits () {
      const { userName, posseWord } = this
      if (!userName || !posseWord) {
        this.$message.error('用户名或密码不能为空')
        return
      }
      delCookie('token')
      post('/api/crm/sys/manage/token/user/login', { username: userName, password: posseWord }).then((req) => {
        if (req && req.code === 200) {
          this.$message({ message: '登录成功！', type: 'success' })
          setCookie('token', JSON.stringify(req.data.access_token))
          this.$router.push('/dashboard') // 登录成功后跳转
        } else {
          this.$message.error(req.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #00c4a7;

  .login-box {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 360px;

    .login-logo img {
      width: 80px;
      margin-bottom: 20px;
    }

    .login-title {
      font-size: 22px;
      font-weight: bold;
      color: #00c4a7;
      margin-bottom: 30px;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }

    .login-form {
      .form-item {
        margin-bottom: 20px;

        .input-wrapper {
          position: relative;
          display: flex;
          align-items: center;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          height: 40px;
          padding-left: 40px;
          padding-right: 60px;
          background-color: #ffffff;

          input {
            flex: 1;
            border: none;
            height: 30px;
            font-size: 14px;
            outline: none;
            padding-top: 5px; /* 增加顶部内边距 */
            padding-bottom: 5px;

            &::placeholder {
              color: #c0c0c0;
            }
          }

          .icon {
            position: absolute;
            left: 10px;
            width: 20px;
            height: 20px;
          }

          .toggle-password {
            position: absolute;
            right: 10px;
            background: none;
            border: none;
            color: #00c4a7;
            font-size: 14px;
            cursor: pointer;
          }
        }
      }

      .login-button {
        width: 100%;
        height: 40px;
        background-color: #00c4a7;
        color: #ffffff;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;

        &:hover {
          background-color: #009e86;
        }
      }
    }
  }

  .footer {
    margin-top: 20px;
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
  }
}
</style>
